// 代码分割（相当于是vue-router中的路由懒加载）
// 作用：提升应用程序运行速度，本质上是一个性能优化
// 技术核心点：异步地动态地import组件，webpack代码分割技术

// 参考文档：https://reactrouter.com/web/guides/code-splitting

// 第1步：cnpm i @babel/plugin-syntax-dynamic-import -D
// 第2步：在 babel.config.js 中进行配置，以支持动态import这种语法
// 第3步：cnpm i @loadable/component -S
// 第4步：使用 @loadable/component 库，动态import页面组件
// Webpack打包时，会根据 @loadable/component 配置的路由规则，实现代码分割。

// 根据loadable匹配路由规则
import React from 'react'
import loadable from '@loadable/component'
// icons是基本的图标
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined
} from '@ant-design/icons'

// 使用下面的写法能实现代码分割（路由懒加载）
const ToDolist = loadable(() => import('./study/ToDolist'))
const TestEvent = loadable(() => import('./study/TestEvent'))
const TestForm = loadable(() => import('./study/TestForm'))
const CnodeList = loadable(() => import('./study/CnodeList'))
const TestComponent = loadable(() => import('./study/TestComponent'))
const TestLife = loadable(() => import('./study/TestLife'))
const TestCombine = loadable(() => import('./study/TestCombine'))
const TestContext = loadable(() => import('./study/TestContext'))
const TestHoc = loadable(() => import('./study/TestHoc'))
const TestHooks = loadable(() => import('./study/TestHooks'))
const MusicHooks = loadable(() => import('./study/MusicHooks'))
const TestMobx = loadable(() => import('./mobx/TestMobx'))
const Todolist = loadable(() => import('./mobx/ToDolist'))
const MusicList = loadable(() => import('./mobx/MusicList'))
// 学习ts
const TsDemo = loadable(() => import('./tsstudy/TsDemo'))

// 复习React
const state = loadable(() => import('./review/state'))
const hook1 = loadable(() => import('./review/hooks'))
const props = loadable(() => import('./review/props'))
const useCallback = loadable(() => import('./review/useCallback'))

export default [
  {
    id: 1101,
    title: 'react基础',
    icon: <DesktopOutlined />,
    children: [
      {
        id: 11011,
        title: 'React事件',
        path: '/event',
        component: TestEvent
      },{
        id: 11012,
        title: 'form表单',
        path: '/form',
        component: TestForm
      },{
        id: 11013,
        title: '组件',
        path: '/component',
        component: TestComponent
      },{
        id: 11014,
        title: '生命周期',
        path: '/life',
        component: TestLife
      }
    ]
  }, 
  {
    id: 1201,
    title: 'react进阶',
    icon: <PieChartOutlined />,
    children: [
      {
        id: 12011,
        title: '组合',
        path: '/combine',
        component: TestCombine
      },{
        id: 12012,
        title: '上下文',
        path: '/context',
        component: TestContext
      }
    ]
  }, 
  {
    id: 1301,
    title: 'react高级',
    icon: <FileOutlined />,
    children: [
      {
        id: 13011,
        title: '高阶组件',
        path: '/hoc',
        component: TestHoc
      },{
        id: 13012,
        title: '函数式组件',
        path: '/hooks',
        component: TestHooks
      },{
        id: 13013,
        title: 'mobx状态管理',
        path: '/mobx',
        component: TestMobx
      },{
        id: 13014,
        title: '用mobx实现todolist',
        path: '/todo',
        component: Todolist
      },{
        id: 13015,
        title: '用mobx实现QQ音乐列表',
        path: '/qq',
        component: MusicList
      }
    ]
  }, 
  {
    id: 1401,
    title: 'react实战',
    icon: <TeamOutlined />,
    children: [
      {
        id: 14011,
        title: '代办任务列表',
        path: '/todolist',
        component: ToDolist
      }, {
        id: 14012,
        title: 'QQ音乐的Hooks写法',
        path: '/qqhooks',
        component: MusicHooks
      }, {
        id: 14013,
        title: 'cnode',
        path: '/cnode',
        component: CnodeList
      }
    ]
  },
  {
    id: 1501,
    title: 'TypeScript',
    icon: <TeamOutlined />,
    children: [
      {
        id: 15011,
        title: 'TypeScript学习',
        path: '/ts',
        component: TsDemo
      }
    ]
  },
  {
    id: 1601,
    title: '复习React',
    icon: <TeamOutlined />,
    children: [
      {
        id: 16011,
        title: 'setState复习',
        path: '/state',
        component: state
      },
      {
        id: 16012,
        title: 'hooks API',
        path: '/hook1',
        component: hook1
      },
      {
        id: 16013,
        title: 'props',
        path: '/props',
        component: props
      },
      {
        id: 16014,
        title: 'back',
        path: '/back',
        component: useCallback
      }
    ]
  }
]